<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table{
      width: 60%;
      margin: 30px auto;
      border: 1px solid black;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid black;
    }
  </style>
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 将一页学生信息以表格的形式展现 -->
    
    <button @click="add()">添加</button>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>生日</th>
          <th>班级</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(stu,index) in students" :key="stu.id">
          <td>{{stu.id}}</td>
          <td>{{stu.name}}</td>
          <td>{{stu.birth}}</td>
          <td>{{stu.grade}}</td>
          <td>
            <a href="" @click.prevent="toEdit(index)">编辑</a>
            <a href="" @click.prevent="toDelete(index)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <form action="" v-if="showForm">
      <div class="item"><label for="">姓名</label><input type="text" v-model="student.name"></div>
      <div class="item"><label for="">生日</label><input type="text" v-model="student.birth"></div>
      <div class="item">
        <label for="">班级</label>
        <select v-model="student.grade">
          <option value="一年二班">一年二班</option>
          <option value="一年三班">一年三班</option>
          <option value="二年一班">二年一班</option>
          <option value="二年一班">二年二班</option>
          <option value="三年一班">三年一班</option>
        </select>
      </div>
      <div class="item">
        <!-- 
          button的type默认值是submit,默认行为是提交表单
          添加事件修饰符prevent后，会阻止事件的默认行为
         -->
        <button @click.prevent="addStudent" v-if="formState=='add'">添加学生</button>
        <button @click.prevent="editStudent" v-else>编辑学生</button>

      </div>
    </form>
  </div>
  <script>
    let id = 0;
    let app = new Vue({
      el:'#app',
      data:{
        formState:'add',
        showForm:false,
        student:{
          id:0,
          name:'',
          birth:'',
          grade:'',
        },
        students:[
          {
            id:1,
            name:'zs',
            birth:'1995-8-9',
            grade:'一年二班',
          },
          {
            id:2,
            name:'李四',
            birth:'1995-9-7',
            grade:'一年二班',
          },
          {
            id:3,
            name:'王五',
            birth:'1995-6-9',
            grade:'一年二班',
          },
          {
            id:4,
            name:'刘柳',
            birth:'1995-4-5',
            grade:'一年二班',
          },
        ]
      },
      methods:{
        addStudent:function(){
          id=this.students.length+1;
          name=this.student.name;
          birth=this.student.birth;
          grade=this.student.grade;
          this.students.splice(this.students.length,0,{id,name,birth,grade})

          this.showForm = false
        },
        toEdit:function(index){
          // 要显示表单，表单要绑定当前行的数据
          this.student = this.students[index]
          this.showForm = true;
          this.formState = 'edit'
        },
        editStudent:function(){
          this.showForm = false;
          this.formState = 'add'
        },
        toDelete:function(index){
          // 数组的splice方法的使用
          this.students.splice(index,1);
        },
	add(){
	this.showForm=true ;
	this.formState='add'		
}
      }
    });
  </script>
</body>
</html>